<template>
  <div class="winControl noDrag">
    <div class="winControlBtn iconfont" @click="minimize">
      <FontIcon iconName="Minus" class="style-svg" />
    </div>
    <div class="winControlBtn iconfont" @click="toggleMaximize">
      <FontIcon v-if="!isMaximize" iconName="FullScreen" class="style-svg" />
      <FontIcon v-else iconName="CopyDocument" class="style-svg" />
    </div>
    <div class="winControlBtn iconfont" @click="close">
      <FontIcon iconName="Close" class="style-svg" />
    </div>
  </div>
</template>

<script>
import FontIcon from "@/components/FontIcon/index.vue"

export default {
  data() {
    return {
      isMaximize: false
    }
  },
  components: {
    FontIcon
  },
  async created() {
    // try {
    //   this.isMaximize = await window.electronAPI.getIsMaximize(
    //     this.$route.params.id
    //   )
    // } catch (error) {
    //   console.log(error)
    // }
  },
  methods: {
    minimize() {
      window.electronAPI.minimize()
    },

    toggleMaximize() {
      this.isMaximize = !this.isMaximize
      window.electronAPI.maximize()
    },

    close() {
      window.electronAPI.close()
    }
  }
}
</script>

<style lang="less" scoped>
.winControl {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 100%;

  .winControlBtn {
    width: 40px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    &:hover {
      background-color: #ccced1;
    }

    &.iconguanbi {
      &:hover {
        background-color: #e81123;
        color: #fff;
      }
    }
  }
}
</style>
